<template>
	<view class="report-page">
		<view class="report-page-bg">
			<lexiconNavVue title="| 英语写作 | - 测评报告" />
			<view class="top-hr"></view>
			<scroll-view class="main" :style="{height: height + 'px'}" scroll-y>
				<view style="padding-top: 70px;"></view>
				<view class="new-score">
					<view class="d1">新记录</view>
					<view class="d2">{{total}}分</view>
				</view>
				<view class="tip">{{fullTitleStr}}</view>
				<view class="list1">
					<view class="item" v-for="(item, i) in list1" :key="i">
						<view class="item-score">
							<view class="item-score1">
								{{item.score}}
							</view>
						</view>
						<view class="item-title">{{item.title}}</view>
						<view class="item-enTitle">{{item.enTitle}}</view>
					</view>
				</view>
				<view class="more">
					<view>MORE</view>
					<image class="arrow" src="/static/image/nav-back.png" mode="aspectFit"></image>
				</view>
				<view class="question">
					<view class="ques-title">第一题｜First Question</view>
					<view class="ques-card">
						<view class="ques-card-title">本题题干｜Question Prompt</view>
						<view class="desc">{{testInfo.name}}</view>
						<view class="desc-en">{{testInfo.en_name}}</view>
						<image v-if="testInfo.img" class="desc-img" :src="testInfo.img" mode="widthFix"></image>
						<view class="content">{{testInfo.content}}</view>
						<view class="ques-card-title">
							<view>你的回答｜Your Answer</view>
							<image class="voice" v-if="testUserInfo.mp3" v-show="false"
								@click="playVoiceClicked(testUserInfo.mp3)"
								:src="'/static/image/report/' + ( play ? 'voice1' : 'voice') + '.png'" mode="widthFix">
							</image>
						</view>
						<view class="desc-en">{{testUserInfo.mine_content}}</view>
					</view>

					<!-- 维度 -->
					<view class="ques-card" v-for="(item, i) in list1" :key="i">
						<view class="ques-card-title">
							<view>{{item.title}}｜{{item.enTitle}}</view>
							<view class="stars">
								<image class="star" src="/static/image/report/s1.png"
									v-for="(star, s) in starCount(item.score)" :key="s" mode="widthFix"></image>
								<image class="star" src="/static/image/report/s2.png" v-if="halfStar(item.score)"
									mode="widthFix"></image>
							</view>
						</view>
						<view class="desc-en">{{item.description}}</view>
						<view class="evaluate">{{item.evaluate}}</view>
						<!-- <block v-if="item.title === '内容维度'">
							<view class="desc-en">参考答案｜Reference Answer</view>
							<view class="desc-en">Look, what are these animals doing now inthe zoo? Four elephants are
								drinking waterTwo cute pandas are sleeping on the tree.
								Amonkey is sitting over there and eating abanana. And a tiger is swimming in the
								waterTwo giraffes are running!</view>
							<view class="desc-en">关键词｜Keywords</view>
							<view class="desc-en">drinking, eating, giraffes</view>
						</block> -->
						<scoreMark :score="item.score"></scoreMark>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import scoreMark from './score-mark.vue'
	export default {
		components: {
			scoreMark
		},
		data() {
			return {
				height: 0,
				list1: [{
						score: 30,
						title: '发音维度',
						enTitle: 'Pronunciation Dimension',
						"evaluate": '',
						"description": ''
					},
					{
						score: 100,
						title: '内容维度',
						enTitle: 'Content Dimension',
						"evaluate": '',
						"description": ''
					},
					{
						score: 20,
						title: '语法维度',
						enTitle: 'Grammar Dimension',
						"evaluate": '',
						"description": ''
					},
					{
						score: 20,
						title: '表达维度',
						enTitle: 'Expression Dimension',
						"evaluate": '',
						"description": ''
					},
					{
						score: 20,
						title: '流利度',
						enTitle: 'Fluency',
						"evaluate": '',
						"description": ''
					},
					{
						score: 20,
						title: '词汇量',
						enTitle: 'Vocabulary',
						"evaluate": '',
						"description": ''
					},
				],
				play: false,
				reportId: '',
				total: 0,
				testInfo: '',
				testUserInfo: {},
				fullTitleStr: ''
			};
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.isPad = systemInfo.screenWidth > 600 && systemInfo.pixelRatio < 3;

			this.reportId = options.id
			this.getResultData();
		},
		onReady() {
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				this.height = uni.getSystemInfoSync().screenHeight - rect.bottom;
			}).exec();
		},
		onUnload() {
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('portrait-primary');
			// // #endif
		},
		computed: {},
		mounted() {
			var that = this;
			that.audioContext = uni.createInnerAudioContext();
			// 监听错误事件
			that.audioContext.onError((res) => {
				//MediaError（媒体错误）：表示音频播放过程中出现了媒体相关的错误。
				if (res && res.errMsg == 'MediaError') {}
				// SrcError（资源路径错误）：表示音频资源路径设置不正确的错误
				if (res && res.errMsg == 'SrcError') {
					uni.showToast({
						title: 'SrcError，请重试~',
						icon: 'error'
					})
				}
			});
			// 监听音频开始播放事件
			that.audioContext.onPlay(() => {});
			// 监听播放中事件
			that.audioContext.onTimeUpdate(() => {});
			// 监听音频播放完毕事件
			that.audioContext.onEnded(() => {
				this.play = false;
				that.getFileList();
			});
		},
		methods: {
			getResultData() {
				this.$http.ajax_test_card_record_info({
					'test_card_id': this.reportId,
				}).then(res => {
					if (res.code == 200) {
						this.total = 0
						this.list1 = res.data[0].content.score_list.map(item => {
							item.score = Math.floor(item.score * 100)
							this.total += item.score
							return item
						})
						this.total = Math.round(this.total / this.list1.length)
						if (this.total >= 0 && this.total < 60) {
							this.fullTitleStr = '还需要努力，再试一次吧！'
						} else if (this.total > 59 && this.total < 80) {
							this.fullTitleStr = '很不错呦，继续努力！'
						} else if (this.total > 79) {
							this.fullTitleStr = '非常不错，再接再厉！'
						}
						this.testInfo = res.data[0].test_info
						this.testUserInfo = res.data[0].test_user_info
						console.log(this.list1)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			halfStar(score) {
				return (score % 20) > 0
			},
			starCount(score) {
				return Math.floor((score - (score % 20)) / 20)
			},
			press() {
				this.play = !this.play
			},
			playVoiceClicked(voiceUrl) {
				// 下载文件到本地
				var that = this;
				uni.downloadFile({
					url: voiceUrl, // 要下载的文件地址
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							// 下载成功，将文件保存到本地
							uni.saveFile({
								tempFilePath: downloadRes.tempFilePath,
								success: (saveRes) => {
									if (that.audioContext) {
										that.audioContext.stop();
										that.audioContext.src = saveRes.savedFilePath;
										setTimeout(function() {
											that.audioContext.play();
										}, 500)
									}
								},
								fail: (error) => {
									console.error('保存文件失败：', error);
								}
							});
						} else {
							console.error('下载文件失败，状态码：', downloadRes.statusCode);
						}
					},
					fail: (error) => {
						console.error('下载文件失败：', error);
					}
				});
				this.play = true;
			}
		}
	}
</script>

<style lang="less" scoped>
	.report-page {
		width: 100vw;
		height: 100vh;
		background: radial-gradient(#373632 40%, #130e00 100%);
		overflow: hidden;

		.report-page-bg {
			width: 100vw;
			height: 100vh;
			background-image: url(/static/image/homePage/diwen.png);
			background-size: 100% auto;
			background-position: center;
		}

		.main {
			width: 100%;
			// overflow-x: hidden;
			// overflow-y: auto;
			box-sizing: border-box;
		}

		.new-score {
			width: 160px;
			height: 160px;
			text-align: center;
			color: #000;
			margin: 0 auto 10px;
			font-weight: bold;
			// background: linear-gradient(to bottom, #fdd06a, #fff497);
			background-image: url(/static/image/report/new.png);
			background-repeat: no-repeat;
			background-size: contain;
			border-radius: 20px;

			.d1 {
				font-size: 32px;
				padding-top: 28px;
			}

			.d2 {
				font-size: 42px;
				line-height: 42px;
			}
		}

		.tip {
			text-align: center;
			color: #fff;
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 40px;
		}

		.list1 {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-wrap: wrap;
		}

		.item {
			width: 30%;
		}

		.item-score {
			width: 96px;
			height: 96px;
			border-radius: 96px;
			font-size: 36px;
			font-weight: bold;
			color: #000;
			background: linear-gradient(to top, #fdd06a, #fff497);
			padding: 3px;
			margin: 0 auto;

		}

		.item-score1 {
			width: 90px;
			height: 90px;
			border-radius: 90px;
			background: linear-gradient(to bottom, #fdd06a, #fff497);
			text-align: center;
			line-height: 90px;
		}

		.item-title {
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			line-height: 22px;
			margin-top: 10px;
		}

		.item-enTitle {
			color: #fff;
			font-size: 10px;
			text-align: center;
			margin-bottom: 30px;
		}

		.more {
			color: #fff;
			font-size: 26px;
			font-weight: bold;
			text-align: center;
			margin-top: 20px;

			.arrow {
				width: 24px;
				height: 24px;
				transform: rotate(270deg);
			}
		}

		.question {
			padding: 80px 30px 40px;
		}

		.ques-title {
			color: #fff;
			font-size: 20px;
			font-weight: bold;

			&::after {
				content: '';
				display: block;
				width: 180px;
				height: 3px;
				background: #fdde78;
			}
		}

		.ques-card {
			margin-top: 30px;
			padding: 24px 20px;
			border-radius: 26px;
			background: linear-gradient(to bottom, #fdcf6a, #fff497);
		}

		.ques-card-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.stars {
				width: 200px;

				.star {
					width: 20px;
					height: 20px;
					margin-top: 10px;
					margin-left: 6px;
				}
			}

			.voice {
				width: 20px;
			}
		}

		.desc {
			font-weight: bold;
			font-size: 16px;
		}

		.desc-en {
			font-weight: bold;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.evaluate {
			font-weight: bold;
			font-size: 18px;
		}

		.desc-img {
			min-width: 40%;
			max-width: 80%;
			border-radius: 24px;
			margin-bottom: 10px;
		}

		.content {
			font-weight: bold;
			font-size: 30px;
			margin-bottom: 20px;
		}
	}


	@media screen and (orientation: landscape) and (min-width: 600px) {

		/* 这里写横屏下的样式 */
		.report-page {
			background: radial-gradient(#373632 30%, #130e00 100%);

			.report-page-bg {
				background-size: contain;
			}
		}

		.list1 {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.item {
			flex: 1;
		}

		.item-title {
			font-size: 24px;
		}

		.ques-card-title {
			flex-wrap: nowrap;

			.stars {
				width: auto;
				margin-top: 0;
				text-align: right;
			}
		}
	}
</style>